<template>
  <div class="paiming">
    <van-nav-bar
      title="日排名详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <table class="table">
      <thead>
        <td>排名</td>
        <td>城市</td>
        <td>综合指数</td>
        <td>主要污染物</td>
      </thead>
      <tbody>
        <tr v-for="(item, index) in cityList" :key="item.location.id">
          <td>{{ index+1 }}</td>
          <td>{{ item.location.name }}</td>
          <td>{{ item.air.city.aa}}</td>
          <td>{{ item.air.city.primary_pollutant }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { homeAir } from '../../../service/cityService'
import { cityListQuery } from '@/service/cityService'
import { useRouter } from 'vue-router';

let router=useRouter();
let i=ref(0)
 let ress:any = ref([])
const cityList:any = ref([])
const onClickLeft = () => {
  router.push('/analyse')
}
const cityQuery = async () => {
  let res = await cityListQuery()
  let list:any = res.data.msg
  //只取市级
  const regex = /^[\u4e00-\u9fa5\w\W]+市$/
  let shiList = list.filter((item:any) => {
    if (regex.test(item.行政归属)) {
      const spliceLength2 = item.行政归属.lastIndexOf('/')
      let str = item.行政归属.slice(spliceLength2 + 1)
      item.行政归属 = str
      return item
    }
  })
 
  cityList.value=shiList.splice(0, 9).map(async (item:any) => {
    console.log(item.行政归属);
    let res = await homeAir({
      key: 'S_kv1Ro8FrmQ4UeD9',
      location: item.行政归属,
      language: 'zh-Hans',
      scope: 'city'
    })
    let aa:any = 0
    aa +=
      res.data.results[0].air.city.aqi * 1 +
      res.data.results[0].air.city.co * 1 +
      res.data.results[0].air.city.no2 * 1 +
      res.data.results[0].air.city.o3 * 1 +
      res.data.results[0].air.city.pm10 * 1 +
      res.data.results[0].air.city.pm25 * 1 +
      res.data.results[0].air.city.so2 * 1
    aa = (aa / 7).toFixed(0)
    res.data.results[0].air.city.aa = aa
    ress.value[i.value]=res.data.results[0];
    i.value++;
  })
  cityList.value = ress.value
}

onMounted(async() => {
 await cityQuery()
 
})
</script>

<style lang="scss" scoped>
.paiming {
  background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202106%2F08%2F20210608183342_7e6a8.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1686359879&t=6ebad37a55bd7f5faf7b536a9803f298');
  background-size: cover;
  height: 100%;
  padding: 10px;
  .title {
    text-align: center;
    line-height: 30px;
    font-size: 20px;
     color: #fff;
     font-weight: 700;
  }
  .table {
    margin-top: 20px;
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    background: rgba($color:#fff, $alpha: 0.5);
    td {
      padding: 0;
      margin: 0;
      border: 1px solid #fff;
    }
  }
}
</style>
